<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>02-grid布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        background-color: pink;
        display: grid;
        /* 行属性 */
        /* grid-template-rows: 100px 100px; */
        /* 等同于上面代码 */
        grid-template-rows: repeat(4, 100px); /* 重复函数 */
        grid-template-columns: repeat(3, 100px); /* 重复函数 */
        /* 列属性 */
        /* grid-template-columns: 100px 100px; */
        /* 自动填充 将自动按照30%划分 如空间不够则不划分*/
        /* grid-template-columns: repeat(auto-fill, 30%); */
        /* auto取值 auto将容器剩余空间进行赋值 */
        /* grid-template-columns: 100px auto 100px; */
        /* fr片段划分 类似flex布局的flex：1 */
        /* grid-template-columns: 2fr 1fr 3fr; */
        /* minmax函数取值  如属于空间在100-200之间，则取之间的值，如小于100，则取100，大于200，则取200*/
        /* grid-template-columns: 200px 200px minmax(100px, 200px); */
        /* 调整行间距 */
        /* grid-row-gap: 20px; */
        /* 列间距 */
        /* grid-column-gap: 5px; */
        /* 间距复合属性  第一个行间距 第二个列间距*/
        /* grid-gap: 10px 10px; */
        /* 内容排列方式 默认值row 横着显示*/
        /* grid-auto-flow: column; */
        /* 网格内容水平垂直居中 */
        /* grid-template-rows: repeat(1, 300px);
        grid-template-columns: repeat(1, auto); */
        /* justify-items: center; */
        /* align-items: center; */
        /* 复合属性 第一个是行 第二个是列 */
        /* place-items: center end; */
        /* 整个大网格水平垂直居中 */
        /* justify-content: center; */
        /* align-content: center; */
        /* 复合属性 */
        /* place-content: center; */
      }
      .box1 {
        /* 合并网格 */
        grid-row: 1/3;
        grid-column: 2/4;
        /* grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 4; */
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px red solid;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item box1">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
    </div>
  </body>
</html>
